import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/login_controller.dart';

class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      assignId: true,
      builder: (logic) {
        return Scaffold(
          body: SizedBox.expand(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 0, bottom: 32),
                  child: FlutterLogo(
                    size: 60,
                  ),
                ),
                Card(
                  child: SizedBox(
                    width: MediaQuery
                        .of(context)
                        .size
                        .width - 80,
                    child: Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(top: 15, bottom: 10),
                          child: Text(
                            "手机登录",
                            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                          ),
                        ),
                        Form(
                          key: logic.formKey,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              AutofillGroup(
                                child: Column(
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.only(top: 10.0, bottom: 20.0, left: 25.0, right: 25.0),
                                      child: TextFormField(
                                        keyboardType: TextInputType.phone,
                                        autofillHints: const [AutofillHints.username],
                                        decoration: const InputDecoration(
                                          icon: Icon(
                                            Icons.person,
                                            size: 22.0,
                                          ),
                                          hintText: '请输入手机号',
                                        ),
                                        validator: (String? value) {
                                          if (value == null || value.isEmpty) {
                                            return '请输入手机号';
                                          }
                                          return null;
                                        },
                                        onSaved: (val) => logic.account = val,
                                        initialValue: "13625625358",
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
                                      child: TextFormField(
                                        obscureText: logic.obscureTextPassword,
                                        // textInputAction: TextInputAction.go,
                                        autofillHints: const [AutofillHints.password],
                                        decoration: InputDecoration(
                                          icon: const Icon(
                                            Icons.lock,
                                            size: 22.0,
                                          ),
                                          hintText: '请输入密码',
                                          suffixIcon: GestureDetector(
                                            onTap: logic.toggleObscureText,
                                            child: Icon(
                                              logic.obscureTextPassword ? Icons.visibility : Icons.visibility_off,
                                              size: 15.0,
                                              color: Colors.black,
                                            ),
                                          ),
                                        ),
                                        validator: (val) {
                                          if (val == null) {
                                            return "请输入密码";
                                          } else if (val.length < 6) {
                                            return "密码太短了";
                                          }
                                          return null;
                                        },
                                        onSaved: (val) => logic.pwd = val,
                                        initialValue: "123456",
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              TextButton(
                                style: TextButton.styleFrom(backgroundColor: Colors.transparent),
                                onPressed: logic.isLoading
                                    ? null
                                    : () {
                                  logic.doLogin();
                                },
                                child: Text("登录", style: TextStyle(fontSize: 16)),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}
